<template>
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>导游地陪</h2>
        <p>周末周边户外运动登山，亲子，自驾游，休闲腐败，露营，野餐。</p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  购买数量：
              </div>
              <div class="sales-board-line-right">
                <!-- 数量选择器 -->
                <!-- 用$event来获得事件获得的值 -->
                <v-counter @on-change="onParamChange('buyNum', $event)"></v-counter>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品类型：
              </div>
              <div class="sales-board-line-right">
                <!-- 下拉菜单 -->
                <!-- :selections向子组件传入数据，onParamChange处理传回来的数据，用$event来获得事件获得的值 -->
                  <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                <!-- 单选按钮 -->
                <!-- 用$event来获得事件获得的值 -->
                  <v-chooser
                  :selections="periodList"
                  @on-change="onParamChange('period', $event)"></v-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  额外服务：
              </div>
              <div class="sales-board-line-right">
                <!-- 多选按钮 -->
                <!-- 用$event来获得事件获得的值 -->
                  <v-mul-chooser
                  :selections="versionList"
                  @on-change="onParamChange('versions', $event)"></v-mul-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right" v-text="price+'元'"></div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button" @click="showPayDialog">
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>作为地道的北京人，我从事双语导游工作近13年，接待了来自五湖四海的海内外朋友数以万计。</p>
        <p>我可以带您领略长城的雄伟，紫禁城的威严，颐和园的秀美，北京胡同的历史，我将给您娓娓道来。</p>
        <p>目前是中级导游。</p>
        <p>来北京旅游找我，将是您正确的选择，带您领略不一样的北京！</p>
        <p>This is Tracy. I am local. If you visit Beijing and engage me as your guide. It is your best choice.</p>
      </div>
      <!-- 支付弹窗 -->
      <my-dialog :is-show="isShowPayDialog" @on-close="hidePayDialog">
        <table class="buy-dialog-table">
          <tr>
            <th>购买数量</th>
            <th>产品类型</th>
            <th>有效时间</th>
            <th>额外服务</th>
            <th>总价</th>
          </tr>
          <tr>
            <td>{{ buyNum }}</td>
            <td>{{ buyType.label }}</td>
            <td>{{ period.label }}</td>
            <td>
              <span v-for="(item, index) in versions" :key="index" v-text="item.label"></span>
            </td>
            <td>{{ price }}</td>
          </tr>
        </table>
        <h3 class="buy-dialog-title">请选择银行</h3>
        <!-- 监听到onChange执行onChangeBanks -->
        <bank-chooser @on-change="onChangeBanks"></bank-chooser>
        <div class="button buy-dialog-btn" @click="confirmBuy">
          确认购买
        </div>
      </my-dialog>
      <my-dialog :is-show="isShowErrDialog" @on-close="hideErrDialog">
        支付失败！
      </my-dialog>
      <check-order :is-show-check-dialog="isShowCheckOrder" :order-id="orderId" @on-close-check-dialog="hideCheckOrder"></check-order>
  </div>
</template>

<script>
import VSelection from "../../components/base/selection";
import VCounter from "../../components/base/counter";
import VChooser from "../../components/base/chooser";
import VMulChooser from "../../components/base/multiplyChooser";
import Dialog from "../../components/base/dialog";
import BankChooser from "../../components/bankChooser";
import CheckOrder from "../../components/checkOrder";
import _ from "lodash";
export default {
  components: {
    VSelection,
    VCounter,
    VChooser,
    VMulChooser,
    MyDialog: Dialog,
    BankChooser,
    CheckOrder
  },
  data() {
    return {
      buyNum: 0, // 购买数量
      buyType: {}, // 产品类型
      versions: [], // 产品版本
      period: {}, // 有效时间
      price: 0, // 总价
      versionList: [
        {
          label: "露营",
          value: 0
        },
        {
          label: "野炊",
          value: 1
        },
        {
          label: "代驾",
          value: 2
        }
      ],
      periodList: [
        {
          label: "半年",
          value: 0
        },
        {
          label: "一年",
          value: 1
        },
        {
          label: "三年",
          value: 2
        }
      ],
      /* 产品类型下拉菜单-数据 */
      buyTypes: [
        {
          label: "入门版",
          value: 0
        },
        {
          label: "中级版",
          value: 1
        },
        {
          label: "高级版",
          value: 2
        }
      ],
      isShowPayDialog: false,
      bankId: null,
      orderId: null,
      isShowCheckOrder: false,
      isShowErrDialog: false
    };
  },
  methods: {
    // 所有组件共用onParamChange方法，用val来告诉方法使用的是哪个组件
    onParamChange(attr, val) {
      // attr是data里面的值
      this[attr] = val; // 修改data里面的值
      console.log(attr, this[attr]);
      this.getPrice();
    },
    getPrice() {
      // 返回versions的value，组成一个新的数组buyVersionsArray
      let buyVersionsArray = _.map(this.versions, item => {
        return item.value;
      });
      let reqParams = {
        buyNumber: this.buyNum,
        buyType: this.buyType.value,
        period: this.period.value,
        version: buyVersionsArray.join(",") // 数组转换成字符串
      };
      this.$http
        .post("/api/getPrice", reqParams)
        .then(res => {
          console.log(res);
          this.price = res.data.amount;
        })
        .catch(err => {
          console.log(err);
        });
    },
    showPayDialog() {
      this.isShowPayDialog = true;
    },
    hidePayDialog() {
      this.isShowPayDialog = false;
    },
    hideErrDialog() {
      this.isShowErrDialog = false;
    },
    hideCheckOrder() {
      this.isShowCheckOrder = false;
    },
    onChangeBanks(bankObj) {
      this.bankId = bankObj.id;
      console.log(this.bankId);
    },
    confirmBuy() {
      let buyVersionsArray = _.map(this.versions, item => {
        return item.value;
      });
      let reqParams = {
        buyNumber: this.buyNum,
        buyType: this.buyType.value,
        period: this.period.value,
        version: buyVersionsArray.join(","),
        bankId: this.bankId
      };
      this.$http
        .post("/api/createOrder", reqParams)
        .then(res => {
          this.orderId = res.data.orderId;
          this.isShowCheckOrder = true; // 付款是否成功弹窗显示
          this.isShowPayDialog = false; // 付款弹窗隐藏
          console.log(this.orderId);
        })
        .catch(err => {
          if (err) {
            throw err;
          }
          this.isShowBuyDialog = false;
          this.isShowErrDialog = true;
        });
    }
  },
  /* el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 */
  /* 组件渲染完毕后执行,设置默认值，执行getPrice()获得默认价格 */
  mounted() {
    this.buyNum = 1;
    this.buyType = this.buyTypes[0];
    this.versions = [this.versionList[0]];
    this.period = this.periodList[0];
    this.getPrice();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.buy-dialog-title {
  font-size: 16px;
  font-weight: bold;
}
.buy-dialog-btn {
  margin-top: 20px;
}
.buy-dialog-table {
  width: 100%;
  margin-bottom: 20px;
}
.buy-dialog-table td,
.buy-dialog-table th {
  border: 1px solid #e3e3e3;
  text-align: center;
  padding: 5px 0;
}
.buy-dialog-table th {
  background: #4fc08d;
  color: #fff;
  border: 1px solid #4fc08d;
}
</style>
